<template>
	<!-- 20230128 -->
	<view class="tab-transverse-scroll-cn width-100p">
		<!-- 组件内容 -->
		<view class="cn-content">
			<!-- 横向滚动条 -->
			<scroll-view class="width-100p height-header" style="white-space: nowrap;" scroll-x :scroll-into-view="'id-' + active">
				<view class="position-relative inline-block" :id="'id-' + index" :style="{'margin-right':space + 'rpx'}"
					v-for="(item,index) in listShow" :key="index" @click="click(index)">
					<view class="line-height-header" :class="{'text-bold text-1a': active == index}"
						:style="{'font-size':textSize + 'rpx'}">{{item.name}}</view>
					<view v-if="index == active" class="item-border block-center"
						:style="{'width': lineWidth + 'rpx', 'height': lineHeight + 'rpx', 'background': color}"></view>
				</view>
			</scroll-view>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">

		</view>
	</view>
</template>

<script>
	import common from '@/components/hzjc/utils/common.js'
	export default {
		data() {
			return {
				lineWidthCopy: this.lineWidth,
				color: '#1a1a1a'
			}
		},
		props: {
			// 数据显示
			list: {
				type: Array,
				default: []
			},
			// 当 list 是一个 对象数组 时，通过 list-key 来指定 Object 中 key 的值作为选择器显示内容
			listKey: {
				type: String,
				default: 'name'
			},
			// 当前激活标签的索引
			active: {
				type: Number,
				default: 0
			},
			// 两个标签之间的间隔距离，默认单位rpx
			space: {
				type: Number,
				default: 40
			},
			// 文字大小，默认单位rpx
			textSize: {
				type: Number,
				default: 32
			},
			// 底部条宽度，默认单位rpx
			lineWidth: {
				type: Number,
				default: 60
			},
			// 底部条高度，默认单位rpx
			lineHeight: {
				type: Number,
				default: 6
			}
		},

		computed: {
			listShow() {
				let array = []
				for (let i = 0; i < this.list.length; i++) {
					let obj = {}
					if (this.listKey) {
						obj.name = this.list[i][this.listKey]
					} else {
						obj.name = this.list[i]
					}
					array.push(obj)
				}
				return array
			}
		},

		methods: {
			/**
			 * 点击标签
			 * @param {int} index 点击的索引
			 * @date 2023-01-28
			 */
			click(index) {
				//更新选中状态
				this.$emit("update:active", index)

				// 回调（当前点击的索引）
				this.$emit('click', {
					index: index
				});
			}
		}
	}
</script>

<style scoped>
	.item-border {
		position: absolute;
		bottom: 10rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
</style>
